import React, { Component } from 'react';
import Link from 'umi/link';
import TweenOne from 'rc-tween-one';
import Children from 'rc-tween-one/lib/plugin/ChildrenPlugin';
import ReactEcharts from 'echarts-for-react';

import styles from "./style.less";

TweenOne.plugins.push(Children);
class Part2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      animation: [null, null, null, null],
      radarName: [
        {
          zh: '公房',
          en: 'publicCount'
        },
        {
          zh: '学校宿舍',
          en: 'dormitoryCount'
        },
        {
          zh: '住宅',
          en: 'houseCount'
        },
        {
          zh: '临建房',
          en: 'temporaryCount'
        },
        {
          zh: '车库',
          en: 'carCount'
        },
        {
          zh: '保障性住房',
          en: 'guaranteeCount'
        },
      ],
      feesName: [
        {
          zh: '水费',
          en: 'waterFee'
        },
        {
          zh: '电费',
          en: 'electricFee'
        },
        {
          zh: '燃气费',
          en: 'gasFee'
        },
        {
          zh: '物业费',
          en: 'propertyFee'
        },
        {
          zh: '供暖费',
          en: 'heatingFee'
        }
      ],
      dclData: [
        {
          num: 0,
          title: '接管',
          url: '/fe/assetManagement/assetsReceived'
        },
        {
          num: 0,
          title: '权属',
          url: '/fe/ownershipManagement/warrantManagement'
        },
        {
          num: 0,
          title: '档案',
          url: '/fe/recordManagement/recordManagement'
        },
        {
          num: 0,
          title: '钥匙',
          url: '/fe/keyManagement/keyManagement'
        },
      ],

      pieData: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}元 ({d}%)"
        },
        legend: {
          x: 'center',
          y: 'bottom',
          data: [],
          itemWidth: 12,
          itemHeight: 12,
          borderRadius: 6
        },
        series: [
          {
            name: '价格',
            color: ["#4a5a75", "#f7ca6a", "#d26870", "#e5e7e9", "#82bb9f"],
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [],
            label: {
              normal: {
                textStyle: {
                  color: 'rgba(0, 0, 0, 0.3)'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgba(0, 0, 0, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      },
      radarData: {
        tooltip: {},
        radar: {
          indicator: []
        },
        series: [{
          name: '',
          type: 'radar',
          data: [
            {
              value: [],
              name: '统计',
              areaStyle: {
                normal: {
                  color: 'rgba(247,216,216, 1)'
                }
              }
            }
          ]
        }]
      }

    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.data.rented !== undefined) {
      let dclData = JSON.parse(JSON.stringify(this.state.dclData));
      dclData[0].num = nextProps.data.receive_upcoming;
      dclData[1].num = nextProps.data.ownership_upcoming;
      dclData[2].num = nextProps.data.doc_upcoming;
      dclData[3].num = nextProps.data.key_upcoming;

      let animation = [];

      for (let i = 0, len = dclData.length; i < len; i++) {
        animation.push(
          {
            Children: {
              value: dclData[i].num,
              floatLength: 0
            },
            duration: 1000,
          }
        );
      };

      let pieData = JSON.parse(JSON.stringify(this.state.pieData));
      let feesName = this.state.feesName;
      let piesData = [];
      let legend = [];


      for (let i = 0, len = feesName.length; i < len; i++) {
        piesData.push({
          name: feesName[i].zh,
          value: nextProps.data.pieChart[feesName[i].en]
        });
        legend.push({ icon: 'circle', name: feesName[i].zh });
      };


      pieData.series[0].data = piesData.sort(function (a, b) { return a.value - b.value; });
      pieData.legend.data = legend;
      let radarTotal = 0;
      let radarData = JSON.parse(JSON.stringify(this.state.radarData));

      for (const key in nextProps.data.radarChart) {
        if (!isNaN(Number(nextProps.data.radarChart[key]))) {
          radarTotal += Number(nextProps.data.radarChart[key]);
        };
      };
      
      radarData.radar.indicator = [];
      radarData.series[0].data[0].value = [];
      for (let i = 0, len = this.state.radarName.length; i < len; i++) {
        radarData.radar.indicator.push(
          { name: this.state.radarName[i].zh, max: radarTotal }
        );
        radarData.series[0].data[0].value.push(nextProps.data.radarChart[this.state.radarName[i].en]);
      };

      this.setState({
        dclData, animation, pieData, radarData
      });
    };
  }

  render() {
    return (
      <div className={styles.part2}>
        <div className={styles.fenxi}>
          <div className='contentHeader'>
            <div className="contentHeaderTitle">
              <p>资产统计</p>
              <p>ASSET STATISTICS</p>
            </div>
          </div>
          <div className={styles.zctj}>
            <ReactEcharts
              option={this.state.pieData}
              notMerge={true}
              lazyUpdate={true}
              style={{
                height: 290
              }}
            />
            {this.state.radarData.radar.indicator.length > 0 ? <ReactEcharts
              option={this.state.radarData}
              notMerge={true}
              lazyUpdate={true} style={{
                height: 290
              }}
            /> : null}
          </div>
        </div>
        <div className={styles.daiban}>
          <div className='contentHeader'>
            <div className="contentHeaderTitle">
              <p>待办事件</p>
              <p>TO-DO EVENT</p>
            </div>
          </div>
          <div className={styles.dcl}>
            {this.state.dclData.map((item, index) => {
              return (
                <Link to={item.url} className={`${styles.dclItem} pull-left ${styles.animate3D}`} key={index}>
                  <TweenOne
                    animation={this.state.animation[index]}
                  >
                    0
                  </TweenOne>
                  <p>{item.title}</p>
                </Link>
              )
            })}
          </div>
        </div>
      </div>
    );
  }
}

export default Part2;